<template>
  <div class="login-container">
    <div class="left">
      <div class="project-name">好乐唯监控系统</div>
    </div>
    <div class="right">
      <div class="login-form">
        <div class="title">登录</div>
        <el-form ref="login-form" label-position="top" label-width="80px" :model="formLogin" :rules="rules">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="formLogin.userName" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="密码" prop="passWord">
            <el-input v-model="formLogin.passWord" placeholder="请输入密码" show-password />
          </el-form-item>
          <el-form-item style="padding-top: 20px">
            <el-button style="width:100%;font-size: 16px" type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import User from '@/api/user'
export default {
  name: 'Index',
  data() {
    return {
      formLogin: {
        userName: '',
        passWord: ''
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        passWord: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /**
     * 登录
     */
    login() {
      this.$refs['login-form'].validate(async(valid) => {
        if (valid) {
          const param = {
            loginName: this.formLogin.userName,
            password: this.formLogin.passWord
          }
          const res = await User.login(param)
          if (res.respCode === '0') {
            sessionStorage.setItem('token',res.data.accessToken)
            await this.$router.push({path:'/home'})
          } else {
            this.$message.info("用户名或者密码错误")
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  .left{
    width: 40%;
    height: 100%;
    background-image: url('~@/assets/login/auth_banner.jpg');
    //background: #409EFF;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    .logo{
      margin-top: -80px;
    }
    .foot-logo{
      position: absolute;
      bottom: 100px;
    }
    .project-name{
      margin-top: 18px;
      font-size: 50px;
      color: #FFFFFF;
      letter-spacing: 0;
      font-weight: 500;
    }
  }
  .right{
    width: 60%;
    height: 100%;
    background:  #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .login-form{
      width: 430px;
      background: #FFFFFF;
      box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.08);
      border-radius: 8px;
      padding: 30px 40px 20px 40px;
      .title{
        font-size: 32px;
        color: #040404;
        letter-spacing: 0;
        font-weight: 400;
        margin-bottom: 20px;
        text-align: center;
      }
      /deep/.el-input__inner{
        font-size: 16px;
        color: #040404;
      }
      /deep/.el-form-item{
        margin-bottom: 24px;
      }
      /deep/.el-form-item__label{
        font-size: 16px;
        color: #040404;
        letter-spacing: 0;
        font-weight: 400;
        padding-bottom: 0;
      }
    }
  }
}

</style>
